<template>
  <div class="benefit">
    <Top><p>我的优惠券</p></Top>
    <section>
      <section class="category_title">
        <span :class="{choosed:chooseColor}" @click="chooseColor=true">红包</span> <span :class="{choosed:!chooseColor}"
                                                                                       @click="chooseColor=false">商家代金券</span>
      </section>
      <!--红包-->
      <section v-if="chooseColor">
        <section data-v-841e3554="" class="hongbao_container">
          <header data-v-841e3554="" class="hongbao_title">
            <section data-v-841e3554="" class="total_number">
              有 <span data-v-841e3554="">3</span> 个红包即将到期
            </section>
            <section class="hongbao_description">
              <img
                  src=""
                  height="24" width="24">
              <router-link to="/hongbao/hbdescription" class="hongbao_detail">红包说明
              </router-link>
            </section>
          </header>
          <ul class="hongbao_list_ul">
            <li class="hongbao_list_li" v-for="(item,i) in benefitArray" :key="i">
              <section class="list_item">
                <div class="list_item_left">
                  <span>¥</span>
                  <span>{{ Math.floor(item.amount) }}</span>
                  <span>.</span>
                  <span>{{ (item.amount - Math.floor(item.amount)) * 10 }}</span>
                  <p>{{ item.description_map.sum_condition }}</p>
                </div>
                <div class="list_item_right">
                  <h4>{{ item.name }}</h4>
                  <p>{{ item.end_date }}到期</p>
                  <p>{{ item.description_map.phone }}</p>
                </div>
                <div class="time_left">{{ item.description_map.validity_delta }}</div>
              </section>
              <!--                       对象属性里没值就判断undfind
              无属性就判断是否为空
              -->
              <footer class="list_item_footer" v-if="item.limit_map != null">
                <p>{{ item.limit_map.restaurant_flavor_ids }}</p>
              </footer>
            </li>
          </ul>
        </section>
        <a href="#/hongbao/hbHistory" class="history_hongbao">
          <span class="check_history">查看历史红包</span>
          <svg class="history_right">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right">
              <svg viewBox="0 0 1024 1024" id="arrow-right" class="icon">
                <path
                    d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
                    class="selected"></path>
              </svg>
            </use>
          </svg>
        </a>
        <footer class="hongbao_footer">
          <router-link to="/hongbao/duihuan" class="hongbao_style" style="border-right: 1px solid rgb(245, 245, 245);">
            兑换红包
          </router-link>
          <router-link to="/hongbao/youjiang" class="hongbao_style">
            推荐有奖
          </router-link>
        </footer>
      </section>
      <!--商家代金券-->
      <section class="voucher_container" v-else>
        <section class="hongbao_description voucher_header" @click="$router.push('/hongbao/hbdescription')">
          <img
              src=""
              width="24" height="24">
          <router-link to="/hongbao/hbdescription" class="hongbao_detail">商家代金券说明</router-link>
        </section>
        <section class="unable_use">
          <img src="" width="300" height="170">
          <p>无法使用代金券</p>
          <p>非客户端或客户端版本过低</p>
          <a href="#/download" class="download_app">
            下载或升级客户端
          </a>
        </section>
      </section>
    </section>

    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Top from "@/components/Top";

export default {
  name: "Benefit",
  components: {Top},
  data: function () {
    return {
      benefitArray: [],
      chooseColor: true,
    }
  },
  created() {
    let user = JSON.parse(localStorage.user);
    let id = user.user_id
    this.axios.get('https://elm.cangdu.org/promotion/v2/users/' + id + '/hongbaos?limit=20&offset=0').then(data => {
      //console.log(data);
      this.benefitArray = data.data;
    }).catch(error => {
      console.log(error);
    })
  },
  methods: {}
}
</script>

<style scoped>
.benefit {
  width: 100%;
//padding-top: 2rem;
}

.category_title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 2rem;
  background-color: #fff;
}

.choosed {
  border-bottom-color: #3190e8 !important;
  color: #3190e8 !important;
}

.category_title span {
  text-align: center;
  font-size: .65rem;
  color: #333;
  padding-bottom: .2rem;
  border-bottom: .1rem solid #fff;
  border-bottom-color: rgb(255, 255, 255);
}

.hongbao_container {
  padding: 0 .7rem;
}

.hongbao_title {
  display: flex;
  justify-content: space-between;
  font-size: .5rem;
  line-height: 2rem;
}

.total_number {
  color: #666;
}

.total_number span {
  color: #ff5340;
}

.hongbao_description {
  display: flex;
  align-items: center;
}

.hongbao_container img {
  width: .6rem;
  height: .6rem;
  margin-right: .2rem;
}

.hongbao_detail {
  color: #3190e8;
}

.hongbao_list_li {
  background: #fff url() repeat-x;
  background-size: .5rem .2rem;
  margin-bottom: .5rem;
  border-radius: .25rem;
}

.list_item {
  display: flex;
  justify-content: space-between;
  padding: 1rem .5rem .8rem;
}

.list_item_left {
  font-size: 0;
  border-right: .025rem dotted #ccc;
  flex: 1;
}

.list_item_left span:first-of-type {
  font-size: .75rem;
  color: #ff5340;
  font-weight: 700;
}

.list_item_left span:nth-of-type(2) {
  font-size: 1.5rem;
  color: #ff5340;
}

.list_item_left span:nth-of-type(3), .list_item_left span:nth-of-type(4) {
  font-size: .8rem;
  color: #ff5340;
  font-weight: 700;
}

.list_item_left p {
  font-size: .4rem;
  color: #999;
}

.list_item_right {
  flex: 2;
  margin-left: 1.5rem;
}

.list_item_right h4 {
  font-size: .7rem;
  color: #666;
  margin-left: -.7rem;
}

.list_item_right p {
  list-style-type: disc;
  margin-left: -.7rem;
  font-size: .4rem;
  color: #999;
}

.time_left {
  font-size: .75rem;
  color: #ff5340;
}

.list_item_footer {
  ackground-color: #f9f9f9;
  padding: .4rem;
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.list_item_footer p {
  list-style-type: disc;
  font-size: .4rem;
  color: #999;
  margin-left: .4rem;
}

.history_hongbao {
  padding: .5rem 0 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history_hongbao .check_history {
  font-size: .5rem;
  color: #999;
  margin-right: .2rem;
}

.history_hongbao .history_right {
  width: .4rem;
  height: .4rem;
  fill: #aaa;
}

.hongbao_footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
}

.hongbao_footer .hongbao_style {
  flex: 1;
  line-height: 2rem;
  text-align: center;
  font-size: .7rem;
  color: #555;
}

.hongbao_footer .hongbao_style {
  flex: 1;
  line-height: 2rem;
  text-align: center;
  font-size: .7rem;
  color: #555;
}

.voucher_container .voucher_header {
  font-size: .5rem;
  justify-content: flex-end;
  line-height: 2rem;
  margin-right: .5rem;
}

.hongbao_description {
  display: flex;
  align-items: center;
}

.hongbao_description img {
  width: .6rem;
  height: .6rem;
  margin-right: .2rem;
}

.hongbao_description .hongbao_detail {
  color: #3190e8;
}

.voucher_container .unable_use {
  text-align: center;
  margin-top: 4rem;
}

.voucher_container .unable_use img {
  width: 6rem;
  height: 3.4rem;
}

.voucher_container .unable_use p:first-of-type {
  font-size: .7rem;
  color: #666;
  margin-top: .4rem;
}

.voucher_container .unable_use p:nth-of-type(2) {
  font-size: .5rem;
  color: #999;
  margin-top: .3rem;
  margin-bottom: .3rem;
}

.voucher_container .unable_use .download_app {
  background-color: #56d176;
  font-size: .65rem;
  color: #fff;
  padding: .3rem;
  border-radius: .15rem;
}


</style>